<template>
  <div class="news">
    <h3>News</h3>
    <!-- <router-link tag="button" to="/Home/News/NewsDetail?title=国内"
      >国内新闻</router-link
    >
    <router-link tag="button" to="/Home/News/NewsDetail?title=国际"
      >国际新闻</router-link
    >
    <router-link tag="button" to="/Home/News/NewsDetail?title=武汉"
      >武汉新闻</router-link
    > -->
    <router-link
      tag="button"
      :to="{
        //path: '/Home/News/NewsDetail',
        name: 'NewsDetail',
        query: {
          title: '国内',
        },
      }"
      >国内新闻</router-link
    >
    <router-link
      tag="button"
      :to="{
        //path: '/Home/News/NewsDetail',
        name: 'NewsDetail',
        query: {
          title: '国际',
        },
      }"
      >国际新闻</router-link
    >
    <router-link
      tag="button"
      :to="{
        //path: '/Home/News/NewsDetail',
        name: 'NewsDetail',
        query: {
          title: '武汉',
        },
      }"
      >武汉新闻</router-link
    >
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "News",
  mounted() {
    console.log("News mounted");
  },
  beforeDestroy() {
    console.log("News beforeDestroy");
  },
};
</script>

<style scoped>
.news {
  background-color: aqua;
}
</style>
